<template>
  <ul class="nav" id="nav" ref="nav">
    <li
      :class="{active:curMenuIndex==index}"
      v-for="(item,index) in menus"
      @click="toPage(item.router,index)"
      :key="item.router"
    >
      {{item.name}}
    </li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        curMenuIndex:0,
        menus:[
          {
            name:'首页',
            router:'/',
          },
          {
            name:'项目',
            router:'/project',
          },
          {
            name:'博客',
            router:'/blog',
          },
          {
            name:'友链',
            router:'/links',
          },
          {
            name:'关于',
            router:'/about',
          },
        ]
      }
    },
    methods:{
      toPage(router,index) {
        this.curMenuIndex = index;
        sessionStorage.curMenuIndex = index;
        this.$router.push({ path: router });
      },
    },
    mounted() {
      if(sessionStorage.curMenuIndex>-1) {
        this.curMenuIndex = sessionStorage.curMenuIndex;
      }
    },
  }
</script>
<style lang="less" scoped>
  @import url("../assets/css/global.less");
  .nav {
    position: absolute;
    right: 5vw;
    top: 5rem;
    z-index: 1;
    display: inline-block;
    background: @color-title;
    color: @color-white;
    li {
      display: inline-block;
      width: 1.5rem;
      padding: .8rem 0;
      margin: 0 1.5rem;
      position: relative;
      cursor: pointer;
      &.active::after {
        content: "";
        position: absolute;
        z-index: -1;
        right: -.5rem;
        top: .5rem;
        display: inline-flex;
        background-image: url('../assets/images/circle.svg');
        background-size: 1rem 1rem;
        width:1rem;
        height:1rem;
      }
    }
  }
</style>
